<template>
  <div class="detail-shop">
    <div class="main">
      <p class="title">{{ info.name }}</p>
      <div class="bottom">
        <p class="desc">{{ info.goods_brief }}</p>
        <p class="price">{{ info.retail_price }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
      default() {
        return {};
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  background-color: #fff;
  text-align: center;
  // display: flex;
  margin-top: 20px;
  .title {
    font-size: 24px;
    padding: 20px 0;
  }
  .desc {
    color: #9E9E9E;
  }
  .price {
    padding: 10px 0;
    color: #f00;
    font-size: 18px;
  }

}
</style>